<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getMedicalOrderLogistics } from '@/apis/order'
  import type { ExpressData } from '@/types/order'
  import { onMounted, ref } from 'vue'
  // #ifdef APP || H5
  // 导入图标资源
  import AMapLoader from '@amap/amap-jsapi-loader'
  // #endif
  import carImg from '@/static/images/car.png'
  import startImg from '@/static/images/start.png'
  import endImg from '@/static/images/end.png'

  const pageParams = defineProps<{ id: string }>()

  const logisticsInfo = ref({} as ExpressData)
  const getData = async () => {
    const res = await getMedicalOrderLogistics(pageParams.id)
    // console.log(res)
    logisticsInfo.value = res
  }

  getData()

  // 高德地图
  const initAMap = async () => {
    let map: any = null

    // 配置密钥，需补充类型声明文件
    window._AMapSecurityConfig = {
      securityJsCode: '90229bbf5027f4b6f8385809b56be0c2',
    }

    // 配置 key
    const AMap = await AMapLoader.load({
      key: 'f089b1ffe4c64903f3f9863ec589b865',
      version: '2.0',
      plugins: [],
    })

    // 使用 Amap 初始化地图
    // !!!!! 注意：容器名称为 map，与页面 <view id="map"> 的 id 一致
    map = new AMap.Map('map', {
      // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
    })

    // 加载驾驶导航插件
    AMap.plugin('AMap.Driving', () => {
      const driving = new AMap.Driving({
        map: map, // 指定轨迹显示地图实例
        showTraffic: true, // 不显示交通信息
        hideMarkers: true, // 隐藏默认标记
      })
      // 开始位置坐标
      const start = logisticsInfo.value.logisticsInfo.shift()
      // 结束位置坐标
      const end = logisticsInfo.value.logisticsInfo.pop()
      // 途经点，需要 map 调整
      const waypoints = logisticsInfo.value.logisticsInfo.map((v) => [v.longitude, v.latitude])

      // 搜索路径(起始点, 终点, 回调函数)
      driving.search(
        [start?.longitude, start?.latitude],
        [end?.longitude, end?.latitude],
        // 途经点
        { waypoints: waypoints },
        (status: string, result: object) => {
          // 未出错时，result即是对应的路线规划方案
          console.log(status, result)
        }
      )

      // 自定义开始位置图片
      const startMarker = new AMap.Marker({
        icon: startImg, // 设置自定义图片
        position: [start?.longitude, start?.latitude], // 图片显示的坐标位置
        anchor: 'bottom-center', // 设置基于坐标点显示的位置
      })
      map.add(startMarker) // 把标记点添加到地图中

      // 自定义结束位置图片
      const endMarker = new AMap.Marker({
        icon: endImg, // 设置自定义图片
        position: [end?.longitude, end?.latitude], // 图片显示的坐标位置
        anchor: 'bottom-center', // 设置基于坐标点显示的位置
      })
      map.add(endMarker) // 把标记点添加到地图中

      // 当前车辆位置
      const carMarker = new AMap.Marker({
        icon: carImg, // 设置自定义图片
        position: [
          logisticsInfo.value.currentLocationInfo.longitude,
          logisticsInfo.value.currentLocationInfo.latitude,
        ],
        anchor: 'bottom-center', // 设置基于坐标点显示的位置
      })
      map.add(carMarker)
      // 3s后，定位到货车，放大地图

      setTimeout(() => {
        map.setFitView([carMarker]) // 设置中心点
        map.setZoom(10) // 设置地图缩放级别
      }, 3000)
    })
  }

  onMounted(async () => {
    // 等数据记载完成
    await getData()

    // #ifdef APP || H5
    // 高德地图
    initAMap()
    // #endif
  })
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <!-- #ifdef APP|| H5 -->
    <view id="map" class="uni-map"></view>
    <!-- #endif -->
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo?.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ logisticsInfo.estimatedTime }} 送达
        {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <!-- 1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-else-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-else-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
